<template>
	<div>
		<el-input
			:disabled="disabled"
			style="width: 100%"
			v-model="showValue"
			@input="inputChange"
			@blur="formatCurrency"
			@focus="parseCurrency"
		>
		</el-input>
	</div>
</template>

<script>
    export default {
        name: "tp-input-number",
        data(){
          return{
            showValue:"",
            numberValue:0
          }
        },
        props:{
		  modelValue:{
              type:Number
          },
          disabled:{
              type:Boolean,
              default:false
          },
          precision:{
            type:Number,
            default: 2
          }
        },
        methods:{
            inputChange(){
               //转换成数字
              let data =  this.showValue;
              this.numberValue = this.delcommafy(data) || 0;
			  this.$emit("update:modelValue",this.numberValue);
              this.$emit("input", this.numberValue);
              this.$emit("inputChange",this.numberValue);
            },
            formatCurrency() {
              let temp = this.numberValue || null;
              this.showValue = this.$TOOL.priceFormat(temp)

            },
            // 获得焦点金额去掉格式
            parseCurrency(event) {
              if (!event.data) {
                this.showValue = this.delcommafy(this.showValue)
              }else {
                this.showValue = null
              }
            },
          delcommafy (num){
            if(!num) return num;
            num = num.toString();
            num = num.replace(/,/gi, '');
            let fnum = parseFloat(num);
            return fnum == 0?null:fnum;
          }
        },
      watch: {
        'modelValue': {
          immediate:true,
          handler(value) {
            this.numberValue = value;
            this.showValue = this.$TOOL.priceFormat(value)
          },
         deep: true
        }
      },
    }
</script>

<style scoped>

</style>
